<div class="MapContent">

    <!-- SideBar -->
    <mat-drawer-container class="drawer-container">

        <!--Opened Contents-->
        <mat-drawer position="end" #drawer class="drawer-side" mode="side" [(opened)]="opened">
            <div id="MapDetail">

                <div [ngSwitch]="true">

                    <div *ngSwitchCase="drawerPage === 1">
                        <drawer-supplychain></drawer-supplychain>
                    </div>

                    <div *ngSwitchCase="drawerPage === 2">
                        Test Work!!

                        <div id="oval">
                        </div>

                        <svg height="400" width="350">
                            <path d="M 0 350 q 100 -30 200 0" stroke="green" stroke-width="1" fill="none" />
                        </svg>

                        <canvas id="myCanvas" width="550px" height="350px"></canvas>

                    </div>

                    <div *ngSwitchDefault>
                        Nothing!!
                    </div>

                </div>

            </div>
        </mat-drawer>

        <!--Main content in this page and the action buttoms -->
        <mat-drawer-content class="drawer-content">

            <!-- Map as desktop-->
            <div id="MapDiv" #dragBounds>
                <mat-slider id="slider" class="slider leaflet-left leaflet-top leaflet-control" [max]="maxZoom" [min]="minZoom" [step]="step"
                    discrete (input)="adjustZoom($event.value)" disabled>
                    <input matSliderThumb [(ngModel)]="Zoom" #slider>
                </mat-slider>

                <!--Draggable windows-->
                <div *ngFor="let window of windowList; let i=index" id={{window.name}}>
                    <window *ngIf="window.opened" [title]="windowList[i].name" [index]="i" [bound]="dragBounds"></window>
                </div>
            </div>


            <!--Operation of hideDrawer-->
            <div class="hideDrawer" [hidden]="!opened">
                <button (click)="opened=false;">
                    <mat-icon class="mat-icon-rtl-mirror">chevron_right
                    </mat-icon>
                </button>
            </div>

            <!--Operation of bottom dock (open/close the windows) -->
            <div class="dock">
                <button *ngFor="let window of windowList; let i=index" id="dockBtn{{i}}" mat-icon-button matTooltip={{window.name}} matTooltipPosition="above"
                    [matTooltipShowDelay]="500" (click)="dockOnClick(i)">
                    <mat-icon>{{window.icon}}
                    </mat-icon>
                </button>
            </div>

        </mat-drawer-content>
    </mat-drawer-container>

</div>